<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>图片预加载之无序加载（不用插件）实例1图片相册之使用预加载</title>
	<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
	<script src="preload.js"></script>
	<style media="screen">
		html,body{
			height: 100%;
		}
		.box{
			text-align: center;
		}
		.btn{
			display: inline-block;
			height: 30px;
			line-height: 30px;
			border: 1px solid #ccc;
			padding: 0 10px;
			margin-right: 50px;
			color: #333;
		}
		.btn:hover{
			background-color: #eee;
		}
		.loading{
			position: fixed;
			top:0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #eee;
			text-align: center;
			font-size: 30px;
		}
		.progress{
			margin-top: 300px;
		}
	</style>
</head>
<body>
<div class="box">
	<img src="//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg" alt="" id="img" width="1200">
	<p>
		<a href="javascript:;" class="btn" data-control="prev">上一页</a>
		<a href="javascript:;" class="btn" data-control="next">下一页</a>
	</p>
</div>
<div class="loading">
	<p class="progress">0%</p>
</div>
<script type="text/javascript">
	var imgs=[
		'//yx-public.oss-cn-hangzhou.aliyuncs.com/adc98e6055dea2f7d70dbf29330836ee.jpeg',
		'//yx-public.oss-cn-hangzhou.aliyuncs.com/14d609f923961c318f13c7fd7e8ac3f6.jpeg',
		'http://yx-public.oss-cn-hangzhou.aliyuncs.com/00d979a61282883a468e7a54bb724063.jpeg',
		'http://yx-public.oss-cn-hangzhou.aliyuncs.com/c2a69a01f45fc6d2bfb1aa68ea578eba.jpeg',
		'http://yx-public.oss-cn-hangzhou.aliyuncs.com/574ce331b164e265ccaaadc975d95bf0.jpeg',
		'http://yx-public.oss-cn-hangzhou.aliyuncs.com/077054ab22e6920e4277e5cbe0b3290d.jpeg',
		'http://img.article.pchome.net/00/44/23/20/pic_lib/wm/2.jpg',
		'http://lcd.yesky.com/imagelist/2009/044/404q4y8g4m0p.jpg',
		'http://lcd.yesky.com/imagelist/2009/044/cgro54wt2t2x.jpg'
	];
	var index = 0,
			len = imgs.length,
			count = 0,
			$progress = $('.progress');
	$.preload(imgs,{
		each: function(count){
			$progress.html(Math.round((count + 1)/ len * 100) + '%' );
		},
		all: function(){
			$('.loading').hide();
			document.title = '1/' + len;
		}
	})
	$('.btn').on('click',function(){
		if( 'prev' === $(this).data('control') ){ //上一张
			index = Math.max(0, --index);
		}else{//下一张
			index = Math.min(len-1, ++index)
		}
		document.title = (index + 1) + '/' + len;
		$('#img').attr('src', imgs[index]);
	})

</script>
</body>
</html>
